<script setup>
defineProps({
    control: Object,
    model: Object,
})
import { ref } from 'vue'

const value = ref('')

const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
]
</script>

<template>
    <!-- 父组件未传递model，第一个v-if不生效 -->
    <el-select v-if="model" v-model="model[control.id]" :disabled="control.props.disabled"
        :clearable="control.props.clearable" :filterable="control.props.filterable"
        :placeholder="control.props.placeholder">
        <el-option v-for="(item, index) in control.props.options" :key="index" :value="item.value"
            :label="control.props.showOptionLabel ? item.label || item.value : item.value"></el-option>
    </el-select>
    <el-select v-else v-model="value" :disabled="control.props.disabled" :clearable="control.props.clearable"
        :filterable="control.props.filterable" :placeholder="control.props.placeholder">
        <el-option v-for=" (item, index)  in control.props.options" :key="index" :value="item.value"
            :label="control.props.showOptionLabel ? item.label || item.value : item.value"></el-option>
    </el-select>

</template>
